<template>
  <h1>App根组件----{{color}}</h1>
  <div style="display: flex;">
    <MyTest></MyTest>
    <MyTest1></MyTest1>
    <button @click="color = 'blue'">按钮</button>
    <!-- <div style="" @touchstart.stop="clickBox" class="bigBox" ref="bbb">
      <div style="left: 10px; top: 10px;" @mousemove="clickBox1" @mousedown="box1" class="shortBox" @mouseup="endBox" ref="aaa"></div>
    </div> -->
  </div>
</template>

<script>
import MyTest from './Test.vue'
import MyTest1 from './Test1.vue'
import { computed } from 'vue'
export default {
  name: 'MyApp',
  components: {
    MyTest,
    MyTest1
  },
  data() {
    return {
      list: [1,2,3,[1,2,3, [34,[332, [234, [333, [213]],[321], [57, [53], [98]]]]]]],
      list1: [],
      flag: false,
      color: 'red'
    }
  },
  created() {
    console.log(this.getList(this.list))
    this.$http({
      method: 'get',
      url: '/getImages',
      params: {
        page: 0,
        size: 10,
        name: '嫦娥'
      }
    }).then(res => {
      console.log(res.data.data)
      for (let i = 0; i < res.data.data.length; i++) {
        console.log(res.data.data[i])
      }
    })
  },
  mounted() {
    
  },
  methods: {
    getList(list) {
      for (let i = 0; i < list.length; i++) {
        if(list[i].length > 1) {
          this.getList(list[i])
        } else {
          this.list1.push(list[i])
        }
      }
      return this.list1
    },
    clickBox() {
      console.log('点击了盒子')
    },
    clickBox1(e) {
      if(this.flag) {
        console.log(e.offsetX)
        console.log(e.offsetY)
        this.$refs.aaa.style.left = e.offsetX + 'px'
        this.$refs.aaa.style.top = e.offsetY + 'px'
      } else {
        
      }
    },
    // 鼠标按下
    box1(e) {
      this.flag = true
      
    },
    // 鼠标离开
    endBox(e) {
      this.flag = false
      // console.log(this.$refs.aaa.style.left)
      // console.log(this.$refs.bbb)
      this.$refs.aaa.style.left = e.offsetX + 'px'
        this.$refs.aaa.style.top = e.offsetY + 'px'
    }
  },
  provide() {
    return {
      color: computed(() => this.color)
    }
  }
}
</script>

<style scoped>
  .bigBox {
    position: relative;
    width: 300px; 
    height: 300px;
    background-color: red;
  }
  .shortBox{
      position: absolute;
      left: 10px;
      top: 0;
      width: 50px; 
      height: 50px;
      background-color: blue;
      cursor: pointer;
    }
</style>